<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topnav</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="dist/topnav.css">
    <link rel="stylesheet" href="dist/bottom.css">
</head>

<body>
    <div class="border-bottom border-5 shadow-sm border-color">
        <div class="navbar">
            <input type="checkbox" id="dropdown-menu" hidden>
            <div class="logo">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>houdunren.com</span>
            </div>
            <nav>
                <a href="">系统学习</a>
                <a href="">实战课程</a>
                <a href="">最近更新</a>
                <a href="">话题讨论</a>
                <a href="">签到打卡</a>
                <a href="">订阅会员</a>
                <a href="">在线文档</a>
                <a href="">训练营</a>
                <a href="">直播间</a>
            </nav>
            <div class="member">
                <div class="message">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    <span>98</span>
                </div>
                <div class="user">
                    <img src="../images/desktop.png" alt="">
                    <div class="name">
                        <label for="toggle-menu">
                            <span>Duncan Edwards</span>
                            <i class="fa fa-sort-desc" aria-hidden="true"></i>
                        </label>
                    </div>
                    <input type="checkbox" id="toggle-menu" hidden>
                    <nav>
                        <a href="">修改资料</a>
                        <a href="">头像设置</a>
                        <a href="">修改密码</a>
                        <hr />
                        <a href="">我的贴子</a>
                        <a href="">会员周期</a>
                        <a href="">站内消息</a>
                        <hr />
                        <a href="">我的主页</a>
                        <a href="">退出登录</a>
                    </nav>
                </div>
            </div>

            <div class="toggle-icon">
                <label for="dropdown-menu">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                </label>
            </div>
        </div>
    </div>
</body>

</html>